<j:lbuttons
  [submitBtnVisible]="false"
  [backBtnVisible]="false"
  [approveBtnVisible]="false"
  [unapproveBtnVisible]="false"
  [approveDividerVisible]="false"
  [printBtnVisible]="false"
  [searchDetailBtnVisible]="true"
  [deleteBtnDisabledFn]="isDeleteButtonDisabledFn"
  [searchDropdownMenuItems]="searchDropdownMenuItems"
  [(searchText)]="searchText"
  [searchPlaceholder]="'BasicArchives::UI:SimplyList.JButtons.SearchPlaceholder' | abpLocalization"
  (newBtnClick)="new()"
  (deleteBtnClick)="delete()"
  (exportBtnClick)="export()"
  (refreshBtnClick)="refresh()"
  (searchBtnClick)="search($event)"
>
</j:lbuttons>
<nz-card class="main-card">
  <nz-table
    #basicTable
    nzSize="middle"
    [nzData]="models"
    [nzTotal]="totalCount"
    nzShowSizeChanger
    nzShowQuickJumper
    [nzFrontPagination]="false"
    [(nzPageIndex)]="currentPage"
    [(nzPageSize)]="maxResultCount"
    [nzPageSizeOptions]="[10, 15, 50, 100, 1000, 5000]"
    [nzShowTotal]="paginationTotalTemplate"
    [nzShowSizeChanger]="true"
    [nzScroll]="{ x: '100%', y: '100%' }"
  >
    <ng-template #paginationTotalTemplate let-total>
      <div style="flex: 1">
        <div *ngIf="selectedCount > 0">
          <span
            nz-icon
            [nzType]="'info-circle'"
            [nzTheme]="'fill'"
            style="font-size: 14px; color: #08c; margin-right: 5px;"
          ></span>
          <span [innerHTML]="'BasicArchives::UI:SimplyList.Pagging.SelectedTips' | abpLocalization : selectedCount"></span>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" nzGhost (click)="clearSelect()">{{ 'BasicArchives::UI:SimplyList.Pagging.SelectedTips.Buttons.Cancel' | abpLocalization }}</button>
          </nz-button-group>
        </div>
      </div>
      <div>{{ 'BasicArchives::UI:SimplyList.Pagging.PaggingTips' | abpLocalization : pageCount : total }}</div>
    </ng-template>
    <thead>
      <tr>
        <th
          nzWidth="60px"
          [nzLeft]="true"
          [nzChecked]="isAllSelected"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="targetAllSelect()"
        ></th>
        <ng-container *ngFor="let prop of entityConfig.propertys">
          <th *ngIf="prop.show" [nzLeft]="prop.fixed === 1" [nzRight]="prop.fixed === 2" [nzWidth]="prop.width + 'px'">
            {{ 'BasicArchives::ModelTitle:' + entityConfig.entityType + '.' + prop.name | abpLocalization }}
          </th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let model of basicTable.data; trackBy: track.by('id')"
        (click)="targetModelSelect(model)"
      >
        <td
          [nzLeft]="true"
          [nzChecked]="isModelSelected(model)"
          (nzCheckedChange)="targetModelSelect(model)"
        ></td>
        <ng-container *ngFor="let prop of entityConfig.propertys">
          <td *ngIf="prop.show" [nzLeft]="prop.fixed === 1" [nzRight]="prop.fixed === 2">
            <ng-container [ngSwitch]="prop.name">
              <ng-container *ngSwitchCase="'Document.Code'">
                <a (click)="view(model.document, $event)">{{ prop.field(model) }}</a>
              </ng-container>
              <ng-container *ngSwitchCase="'Document.DocumentStatus'">
                <nz-tag [nzColor]="getDocumentStatusColor(model)">{{ prop.field(model) }}</nz-tag>
              </ng-container>
              <ng-container *ngSwitchDefault>
                <ng-container *ngIf="!!prop.html && !!prop.html(model); else defaultField">
                  <span [innerHTML]="prop.html(model)"></span>
                </ng-container>
                <ng-template #defaultField>
                  {{ prop.field(model) }}
                </ng-template>
              </ng-container>
            </ng-container>
          </td>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</nz-card> 